<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>醉品茶城商品详细页</title>
		<meta name="keywords" content="茶叶,醉品茶城">
		<link rel="stylesheet" href="../css/initCss.css">
		<link rel="stylesheet" href="../css/public.css">
		<link rel="stylesheet" href="../css/goodmsg.css">
	</head>
	<body>
		<!-- 网页头部header -->
		<div id="header">
			<div class="headerCenter">
				<div class="headLeft">
					<ul class="headLeftUl">
						<li class="zp-index"><a href="../index.html">醉品茶城首页</a></li>
						<li class="zp-tel">
							<a href="">醉品茶城手机版</a>
							<div class="zp-pic">
								<img src="../static/img/phone_qr.jpg" alt="">
								"手机登录购买"
							</div>
							</li>
					</ul>
				</div>
				<div class="headright">
					<dl>
						<dt class="cart-num">
							<a href="goodcar.html">购物车</a>
						</dt>
					</dl>
				</div>
				<div class="headLast">
					<ul class="head-sel">
						<div class="login">
							<li><a href="login.html">登录</a></li>
						    <li><a href="register.html">注册</a></li>
						</div>				
						<li class="welcome"><p>欢迎VIP<mark><em id="userName">XXX</em></mark>进入本网站<span id="logout">注销</span></p></li>
						<li><a id="myOrders" href="#">我的订单</a></li>
						<li><a href="#">帮助</a></li>
						<li><a href="#">关于醉品</a></li>
						<li class="icon-phone">
							<a href="#">4006-066-068</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- header-top -->
		<div id="headerTop">
			<div class="headtopcenter">
				<div class="logo">
					<a href="/"><img src="../static/img/zp_logo_u1.png" alt="醉品茶城"></a>
				</div>
				<div class="search-box">
					<form action="#" id="list">
						<input type="text" name="keyword" class="search-text">
					</form>
					<span class="search-btn" id="sub"></span>
					<div class="clearfix" id="keyword">
						<a href="#" target="_blank" class="first_hot">白茶</a>
						<a href="#" target="_blank">广东单枞</a>
						<a href="#" target="_blank">龙井</a>
						<a href="#" target="_blank">金骏眉</a>
						<a href="#" target="_blank">普洱</a>
					</div>
				</div>
				<div class="three-list">
					<ul class="clearfix">
						<li><p>全场商品90天保价</p></li>
						<li><p>满59元免邮费</p></li>
						<li><p>2000城市货到付款</p></li>
					</ul>
				</div>
				<div class="code">
					<img class="qr-code-img" src="../static/img/phone_qr.jpg" alt="">
					<span class="code-text">手机登录购买</span>
				</div>
			</div>
		</div>
		<!-- header-sel -->
		<div id="header-sel">
			<div class="headSelCenter">
				<dl class="good-list">
					<dt class="list-title">全部商品分类</dt>
					<dd class="list-info">
						<dl class="clearfix">
							<dt class="big-title"><a href="#">白茶</a></dt>
							<dd class="float-left">
								<ul class="clearfix">
									<li> <a href="#">白毫银针</a></li>
									<li> <a href="#">白牡丹</a></li>
									<li> <a href="#">寿眉</a></li>
									<li> <a href="#">其他白茶</a></li>
								</ul>
							</dd>
							<div class="colunm-common column-line">
								<ul>
									<li class="clearfix">
										<a href="#"><img src="../static/img/36.png" alt=""></a>
										<a href="#">白毫银针</a>
									</li>
									<li class="clearfix">
										<a href="#"><img src="../static/img/白茶.jpg" alt=""></a>
										<a href="#">白牡丹</a>
									</li>
									<li class="clearfix">
										<a href="#"><img src="../static/img/寿眉.jpg" alt=""></a>
										<a href="#">寿眉</a>
									</li>
									<li class="clearfix">
										<a href="#"><img src="../static/img/其他白茶.jpg" alt=""></a>
										<a href="#">其他白茶</a>
									</li>
								</ul>
							</div>
						</dl>
						<dl class="clearfix">
							<dt class="big-title"><a href="#">黑茶</a></dt>
							<dd class="float-left">
								<ul class="clearfix">
									<li> <a href="#">普洱茶</a></li>
									<li> <a href="#">安化黑茶</a></li>
									<li> <a href="#">柑普茶</a></li>
									<li> <a href="#">六堡茶</a></li>
								</ul>
							</dd>
							<div class="colunm-common column-line">
								<ul>
									<li class="clearfix">
										<a href="#"><img src="../static/img/普洱生茶.jpg" alt=""></a>
										<a href="#">普洱茶</a>
									</li>
									<li class="clearfix">
										<a href="#"><img src="../static/img/安化黑茶.jpg" alt=""></a>
										<a href="#">安化黑茶</a>
									</li>
									<li class="clearfix">
										<a href="#"><img src="../static/img/柑普茶.jpg" alt=""></a>
										<a href="#">柑普茶</a>
									</li>
									<li class="clearfix">
										<a href="#"><img src="../static/img/六堡茶.jpg" alt=""></a>
										<a href="#">六堡茶</a>
									</li>
								</ul>
							</div>
						</dl>
						<dl class="clearfix">
							<dt class="big-title"><a href="#">红茶</a></dt>
							<dd class="float-left">
								<ul class="clearfix">
									<li> <a href="#">金骏眉</a></li>
									<li> <a href="#">正山小种</a></li>
									<li> <a href="#">云南滇红</a></li>
									<li> <a href="#">祁山红茶</a></li>
								</ul>
							</dd>
							<div class="colunm-common column-line">
								<ul>
									<li class="clearfix">
										<a href="#"><img src="../static/img/金骏眉.jpg" alt=""></a>
										<a href="#">金骏眉</a>
									</li>
									<li class="clearfix">
										<a href="#"><img src="../static/img/正山小种.jpg" alt=""></a>
										<a href="#">正山小种</a>
									</li>
									<li class="clearfix">
										<a href="#"><img src="../static/img/金骏眉.jpg" alt=""></a>
										<a href="#">云南滇红</a>
									</li>
									<li class="clearfix">
										<a href="#"><img src="../static/img/祁门红茶.jpg" alt=""></a>
										<a href="#">祁山红茶</a>
									</li>
									<li class="clearfix">
										<a href="#"><img src="../static/img/九曲红梅.jpg" alt=""></a>
										<a href="#">其他红茶</a>
									</li>
								</ul>
							</div>
						</dl>
						<dl class="clearfix">
							<dt class="big-title"><a href="#">绿茶</a></dt>
							<dd class="float-left">
								<ul class="clearfix">
									<li> <a href="#">龙井</a></li>
									<li> <a href="#">安吉白茶</a></li>
									<li> <a href="#">四川绿茶</a></li>
									<li> <a href="#">碧螺春</a></li>
								</ul>
							</dd>
							<div class="colunm-common column-line">
								<ul>
									<li class="clearfix">
										<a href="#"><img src="../static/img/36.png" alt=""></a>
										<a href="#">龙井</a>
									</li>
									<li class="clearfix">
										<a href="#"><img src="../static/img/白茶.jpg" alt=""></a>
										<a href="#">安吉白茶</a>
									</li>
									<li class="clearfix">
										<a href="#"><img src="../static/img/寿眉.jpg" alt=""></a>
										<a href="#">四川绿茶</a>
									</li>
									<li class="clearfix">
										<a href="#"><img src="../static/img/其他白茶.jpg" alt=""></a>
										<a href="#">碧螺春</a>
									</li>
								</ul>
							</div>
						</dl>
						<dl class="clearfix">
							<dt class="big-title"><a href="#">乌龙茶</a></dt>
							<dd class="float-left">
								<ul class="clearfix">
									<li> <a href="#">武夷岩茶</a></li>
									<li> <a href="#">安溪铁观音</a></li>
									<li> <a href="#">广东单从</a></li>
									<li> <a href="#">漳平水仙</a></li>
								</ul>
							</dd>
							<div class="colunm-common column-line">
								<ul>
									<li class="clearfix">
										<a href="#"><img src="../static/img/36.png" alt=""></a>
										<a href="#">武夷岩茶</a>
									</li>
									<li class="clearfix">
										<a href="#"><img src="../static/img/白茶.jpg" alt=""></a>
										<a href="#">安溪铁观音</a>
									</li>
									<li class="clearfix">
										<a href="#"><img src="../static/img/寿眉.jpg" alt=""></a>
										<a href="#">广东单从</a>
									</li>
									<li class="clearfix">
										<a href="#"><img src="../static/img/其他白茶.jpg" alt=""></a>
										<a href="#">漳平水仙</a>
									</li>
								</ul>
							</div>
						</dl>
						<dl class="clearfix">
							<dt class="big-title"><a href="#">创新品</a></dt>
							<dd class="float-left">
								<ul class="clearfix">
									<li> <a href="#">多品类茶</a></li>
									<li> <a href="#">茶器组合</a></li>
									<li> <a href="#">茶酒组合</a></li>
									<li> <a href="#">其他创新品</a></li>
								</ul>
							</dd>
							<div class="colunm-common column-line">
								<ul>
									<li class="clearfix">
										<a href="#"><img src="../static/img/多品类茶.jpg" alt=""></a>
										<a href="#">多品类茶</a>
									</li>
									<li class="clearfix">
										<a href="#"><img src="../static/img/茶器组合.jpg" alt=""></a>
										<a href="#">茶器组合</a>
									</li>
									<li class="clearfix">
										<a href="#"><img src="../static/img/茶酒组合.jpg" alt=""></a>
										<a href="#">茶酒组合</a>
									</li>
									<li class="clearfix">
										<a href="#"><img src="../static/img/其他创新品.jpg" alt=""></a>
										<a href="#">其他创新品</a>
									</li>
								</ul>
							</div>
						</dl>
						<dl class="clearfix">
							<dt class="big-title"><a href="#">茶器</a></dt>
							<dd class="float-left">
								<ul class="clearfix">
									<li> <a href="#">陶瓷茶具</a></li>
									<li> <a href="#">玻璃茶具</a></li>
									<li> <a href="#">紫砂茶具</a></li>
									<li> <a href="#">茶盘</a></li>
								</ul>
							</dd>
							<div class="colunm-common column-line">
								<ul>
									<li class="clearfix">
										<a href="#"><img src="../static/img/陶瓷茶具.jpg" alt=""></a>
										<a href="#">陶瓷茶具</a>
									</li>
									<li class="clearfix">
										<a href="#"><img src="../static/img/玻璃茶具.jpg" alt=""></a>
										<a href="#">玻璃茶具</a>
									</li>
									<li class="clearfix">
										<a href="#"><img src="../static/img/紫砂茶具.jpg" alt=""></a>
										<a href="#">紫砂茶具</a>
									</li>
									<li class="clearfix">
										<a href="#"><img src="../static/img/茶盘.jpg" alt=""></a>
										<a href="#">茶盘</a>
									</li>
								</ul>
							</div>
						</dl>
					</dd>
				</dl>
				<ul class="row-nav">
					<li class="row-nav-list"><a href="#" target="_blank">品牌集成馆</a></li>
					<li class="row-nav-list"><a href="#" target="_blank">大师名匠馆</a></li>
					<li class="row-nav-list"><a href="#" target="_blank">积分商城</a></li>
					<li class="row-nav-list"><a href="#" target="_blank">茶礼定制</a></li>
				</ul>
			</div>
		</div>
		<!-- content -->
		<div id="good-msg">
			<div class="zuipin-wrapper">
				<div class="good-detail">
					<div class="magnifier">
					    <div class="s_box">
					        <img src="../static/advert-img/1.jpg" alt="">
					        <span></span>
					        <p class="mask"></p>
					    </div>
					    <div class="b_box">
					        <img src="../static/advert-img/1.jpg" alt="">
					    </div>
					    <span class="clear"></span>
					    <ul class="list">
					        <li><img src="../static/advert-img/1.jpg" alt=""></li>
							<li><img src="../static/advert-img/2.jpg" alt=""></li>
							<li><img src="../static/advert-img/3.jpg" alt=""></li>
					    </ul>
					</div>
					<div class="goodsMsg">
					    <h3>最新茶叶最新茶叶最新茶叶最新茶叶最新茶叶最新茶叶</h3>
						<p>特色：<span>香醇美味</span></p>
					    <p>价格：<span>300.00</span></p>
					    <p>品牌：<span>碧螺春</span></p>
					    <p>净含量：<span>200g</span></p>
					    <p>商品编号：<span>353435</span></p>
						<button type="button" class="addcar">加入购物车</button>
					</div>
				</div>
			</div>
		</div>
		<!-- footer -->
		<div id="zuipin-footer">
			<div class="zuipin-wrapper">
				<div class="footer-service">
					<ul>
						<li class="clearfix"><span>原产地直销</span></li>
						<li class="clearfix"><span>1000家合作社联盟</span></li>
						<li class="clearfix"><span>10万亩茶园直供</span></li>
						<li class="clearfix"><span>90天产品保价</span></li>
						<li class="clearfix"><span>30天商品退换货</span></li>
						<li class="clearfix"><span>满59元免运费</span></li>
					</ul>
				</div>
				<div class="footer-links">
					<dl class="col-links">
						<dt>购物指南</dt>
						<dd><a href="#" target="_blank">购物保障</a></dd>
						<dd><a href="#" target="_blank">积分政策</a></dd>
						<dd><a href="#" target="_blank">企业用户</a></dd>
					</dl>
					<dl class="col-links">
						<dt>配送方式</dt>
						<dd><a href="#" target="_blank">快递资费</a></dd>
						<dd><a href="#" target="_blank">配送时间</a></dd>
						<dd><a href="#" target="_blank">配送范围</a></dd>
						<dd><a href="#" target="_blank">验货签收</a></dd>
					</dl>
					<dl class="col-links">
						<dt>支付方式</dt>
						<dd><a href="#" target="_blank">货到付款</a></dd>
						<dd><a href="#" target="_blank">在线支付</a></dd>
						<dd><a href="#" target="_blank">网银在线</a></dd>
						<dd><a href="#" target="_blank">银行转账</a></dd>
					</dl>
					<dl class="col-links">
						<dt>售后服务</dt>
						<dd><a href="#" target="_blank">退换货原则</a></dd>
						<dd><a href="#" target="_blank">退换货要求</a></dd>
						<dd><a href="#" target="_blank">运费规则</a></dd>
						<dd><a href="#" target="_blank">退换货原则</a></dd>
					</dl>
					<dl class="col-links">
						<dt>关于醉品</dt>
						<dd><a href="#" target="_blank">关于我们</a></dd>
						<dd><a href="#" target="_blank">醉品动态</a></dd>
						<dd><a href="#" target="_blank">媒体声音</a></dd>
						<dd><a href="#" target="_blank">品牌集成</a></dd>
					</dl>
					<div class="col-contact">
						<p class="phone">4006-066-068</p>
						<p><span class="time-normal">周一至周五 8:40-18:00</span></p>
						<a class="btn-line-primary" href="#"><i></i>在线客服</a>
					</div>
					<div class="col-wap">
						<img src="../static/img/phone_qr.jpg" alt="">
						<p>醉品茶城手机版</p>
					</div>
				</div>
			</div>
		</div>
		<div id="footer-info-box">
			<div class="zuipin-wrapper">
				<div class="footer-info">
					<img src="../static/img/zui.png" alt="">
					<div class="col-aus">
						<ul class="list-about">
							<li><a href="#">关于我们</a>|</li>
							<li><a href="#">版权声明</a>|</li>
							<li><a href="#">联系我们</a></li>
						</ul><br>
						<div class="copyright"><p>&copy; 2010 - 2020 醉品茶城 厦门醉品春秋网络科技有限公司</p></div>
						<div>
							<span>zuipin.cn All Rights Reserved</span>
							<a href="#">闽ICP备10200063号-1</a>
						</div>		
					</div>
					<div class="footer-picmsg"><img src="../static/img/pincha.png" alt=""></div>
				</div>
			</div>
		</div>
		
	</body>
</html>
<script src="../js/xm_public.js"></script>
<script>
	// 登录注册
	class Index{
		constructor(){
			this.login=document.querySelector(".login");
			this.welcome=document.querySelector(".welcome");
			this.logout=document.getElementById("logout");
			this.uName=document.getElementById("userName");
			this.goodcarBtn=document.querySelector(".cart-num");
			// 对于需要验证是否登录的页面来说，应该立即获取是否登录的信息
			this.init();
			this.addEvent();
		}
		init(){
			 // 获取之后，简单处理数据
			this.m=sessionStorage.getItem("userMsg");
			this.m=this.m ? JSON.parse(this.m) : {};
			// 如果有登录信息
			if(this.m.user){
				// 显示登录的用户名
				this.uName.innerHTML=this.m.user;
				// 隐藏登录注册操作
				this.login.style.display="none";
				// 显示欢迎信息
				this.welcome.style.display="block";
				// 显示购物车按钮
				this.goodcarBtn.style.display="block";
			}
		}
		addEvent(){
			 // 注销功能，就是抹掉登录成功之后的信息
			this.logout.onclick=function(){
				sessionStorage.removeItem("userMsg");
				location.reload();
			}
		}
	}
	new Index;
	
	// 获取数据渲染页面
	// 两个html如何传递数据，url，使用location解析
	// console.log(location.search.slice(1).split("=")[1]);
	class Detaile{
		constructor(){
			this.cont=document.querySelector(".good-detail");
			this.url="http://localhost/myTeaProject/data/goodsdata.json";
			this.load();
			this.getId();
		}
		getId(){
			// 获取地址栏的url后拼接的数据
			this.id=location.search.slice(1).split("=")[1];
		}
		load(){
			 // 请求商品数据库：json
			ajax_promise({
				url:this.url
			}).then((res)=>{
				this.res=JSON.parse(res);
				this.display();
			})
		}
		display(){
			// 将接收到的商品id和商品数据中的id作比较
			this.res.forEach(val=>{
				if(val.goodsId===this.id){
					console.log(val);
					// 根据val的数据内容化，渲染商品详情页
					this.cont.innerHTML=`
					          <div class="magnifier">
					              <div class="s_box">
					                  <img src="${val.img.largeImg[0]}" alt="">
					                  <span></span>
					                  <p class="mask"></p>
					              </div>
					              <div class="b_box">
					                  <img src="${val.img.largeImg[0]}" alt="">
					              </div>
					              <span class="clear"></span>
					              <ul class="list">
					                  ${this.createLi(val.img.smallImg)}
					              </ul>
					          </div>
<<<<<<< HEAD
					          <div class="goodsMsg" index=${val.goodsId}>
					              <h3>${val.name}</h3>
								  <p>特色：<span>${val.title}</span></p>
					              <p>价格：<span>￥${val.price}</span></p>
=======
					          <div class="goodsMsg">
					              <h3>${val.name}</h3>
								  <p>特色：<span>${val.title}</span></p>
					              <p>价格：<span>${val.price}</span></p>
>>>>>>> ce0787ad3ba6177e9f5d7a8aa5b0bb2bbdea1870
					              <p>品牌：<span>${val.brand}</span></p>
					              <p>净含量：<span>${val.neWeight}</span></p>
					              <p>商品编号：<span>${val.goodsId}</span></p>
								  <button type="button" class="addcar">加入购物车</button>
					          </div>`;
			
					// 页面渲染完成后，可以执行放大镜的效果了
					// 执行放大镜时，将遍历到的数据，传入，方便切换大图
					new Large(val.img);
				}
			})
<<<<<<< HEAD
			this.addEvent();
=======
>>>>>>> ce0787ad3ba6177e9f5d7a8aa5b0bb2bbdea1870
		}
		createLi(arr){
			// 根据小图的数量生成对应的结构的功能
			let str="";
			for(let i=0;i<arr.length;i++){
				str+=`<li><img src="${arr[i]}" alt=""></li>`;
			}
			return str;
		}
<<<<<<< HEAD
		
		// 点击加入购物车功能--start---
		addEvent(){
			var that=this;
			this.cont.onclick=function(eve){
				var e=eve || window.event;
				var tar=e.target || e.srcElement;
				if(tar.className=="addcar"){
					that.goodsId=tar.parentNode.getAttribute("index");
					that.setData();
					// return false;
				}
			}			
		}
		setData(){
					// console.log(this.goodsId);
					// 存什么？
					// 数量要不要存，如果存，怎么处理？
					    // id和num，商品数据
					    // 一个商品，要至少存3个数据
					    // 对象打包这三个数据
					    // {
					    //     goodsId:"afa876",
					    //     shuliang:2,
					    //     msg:{
					    //             img:"https://img10.360buyimg.com/n7/jfs/t11266/172/3136897597/311385/898550cb/5ce41430N7bb10f75.jpg",
					    //             price:"1899.00",
					    //             name:"这也是个手机，这是这个手机的名字",
					    //             goodsId:"afa876"
					    //         }
					    // }
					// 一次点击了多个商品
					    // [{...},{...},{...}]
					// 1.存之前要不要判断一下，有没有曾经存过了
					// 如果曾经存过了，意味着本地存储中已经有数据了
					// 怎么判断本地存储中有没有数据？先获取，获取什么名字的值？将来准备存什么名字，这里就获取什么名字
					var gm=localStorage.getItem("goodsMsg");
					if(gm==null){
						 // 1-1.没有存过，直接存
						gm=[{
							goodsId:this.goodsId,
							num:1,
							msg:this.getData(this.goodsId)
						}]
					}else{
						gm=JSON.parse(gm);
						// 1-2.存过数据了
						// 先判断，这次点的，在老数据中有没有
						var t=0;  //状态码
						for(var i=0;i<gm.length;i++){
							if(gm[i].goodsId==this.goodsId){
								 // 1-2-1.有：数量+1
								gm[i].num++;
								t=1;
								break;
							}
						}
						if(t==0){
							// 1-2-2.没有：给数组，新增一个数据
							gm.push({
								goodsId:this.goodsId,
								num:1,
								msg:this.getData(this.goodsId)
							})
						}
					}
					  // 以上这个if里面只是在判断操作获取到的数据，并没有存回去，所以最终操作完之后，需要将数据存到本地存储中
					localStorage.setItem("goodsMsg",JSON.stringify(gm));
					
				}
		// 单独封装为了方便获取所有数据中，某个数据的功能
		// 根据传入的id获取
		getData(id){
			// 遍历的时候，比较，符合，返回这个数据
				for(var i=0;i<this.res.length;i++){
					if(this.res[i].goodsId==id){
						return this.res[i];
					}
				}
				  // 没有符合，返回空对象，保持数据格式一致
				return {};
		}	
		// 点击加入购物车功能--end---	
=======
>>>>>>> ce0787ad3ba6177e9f5d7a8aa5b0bb2bbdea1870
	}
	new Detaile;
	
	// 放大镜功能
	class Large{
	    constructor(imgData){
	        this.sBox = document.querySelector(".s_box");
	        this.sImg = document.querySelector(".s_box img");
	        this.sSpan = document.querySelector(".s_box span");
	        this.bBox = document.querySelector(".b_box");
	        this.bImg = document.querySelector(".b_box img");
	        this.li = document.querySelectorAll(".list li");
	
	        this.imgData = imgData;
	        
	        this.addEvent();
	    }
	    addEvent(){
	        var that = this;
	        this.sBox.onmouseover = function(){
	            that.over();
	        }
	        this.sBox.onmousemove = function(eve){
	            var e = eve || window.event;
	            that.move(e);
	        }
	        this.sBox.onmouseout = function(){
	            that.out();
	        }
	        for(let i=0;i<this.li.length;i++){
	            this.li[i].onclick = function(){
	                that.sImg.src = that.imgData.largeImg[i];
	                that.bImg.src = that.imgData.largeImg[i];
	            }
	        }
	    }
	    over(){
	        this.sSpan.style.display = "block";
	        this.bBox.style.display = "block";
	    }
	    move(e){
	        // 因为页面结构日渐复杂，所以将pageX改回offsetX，但是灰色小滑块会抖，解决方式，纯布局结局
	        var l = e.offsetX - this.sSpan.offsetWidth/2;
	        var t = e.offsetY - this.sSpan.offsetHeight/2;
	        if(l<0) l=0;
	        if(t<0) t=0;
	        if(l > this.sBox.offsetWidth - this.sSpan.offsetWidth){
	            l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
	        }
	        if(t > this.sBox.offsetHeight - this.sSpan.offsetHeight){
	            t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
	        }
	        this.sSpan.style.left = l + "px";
	        this.sSpan.style.top = t + "px";
	        var x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
	        var y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
	        this.bImg.style.left = (this.bBox.offsetWidth - this.bImg.offsetWidth) * x + "px";
	        this.bImg.style.top = (this.bBox.offsetHeight - this.bImg.offsetHeight) * y + "px";
	    }
	    out(){
	        this.sSpan.style.display = "none";
	        this.bBox.style.display = "none";
	    }
	}
	
</script>
